<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 8}" :xl="{span: 8}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table list-name="爬取数量" :list-data="rankListData" @rank-button-click="rankButtonClick" />
      </el-col>

      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 8}" :xl="{span: 8}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table list-name="警告数量" :list-data="rankErrorData" @rank-button-click="rankButtonClick" />
      </el-col>

      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 8}" :xl="{span: 8}" style="padding-right:8px;margin-bottom:30px;">
        <update-log />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import dashboardApi from '@/api/dashboard/dashboard'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import TransactionTable from './components/TransactionTable'
import UpdateLog from '@/views/dashboard/components/UpdateLog'
import moment from 'moment'

const lineChartData = {
  spiderNum: {
    actualData: [100, 120, 161, 134, 105, 160, 165],
    label: ['爬虫数量'],
    color: ['#40c9c6', 'rgba(64,201,198,0.36)']
  },
  countNum: {
    actualData: [52886, 54666, 55946, 60258, 54563, 58286, 60052],
    label: ['入库数量'],
    color: ['#36a3f7', 'rgba(54,163,247,0.36)']
  },
  errorNum: {
    actualData: [81, 100, 121, 104, 105, 90, 100],
    label: ['警告数量'],
    color: ['#f4516c', 'rgba(244,81,108,0.41)']
  },
  otherNum: {
    actualData: [130, 140, 141, 142, 145, 150, 160],
    label: ['点赞数量'],
    color: ['#34bfa3', 'rgba(52,191,163,0.36)']
  }
}

export default {
  name: 'Dashboard',
  components: {
    UpdateLog,
    PanelGroup,
    LineChart,
    TransactionTable
  },
  data() {
    return {
      lineChartData: lineChartData.countNum, // 折线图数据
      rankListData: [], // 爬取数量排行榜数据
      rankErrorData: [] // 错误数量排行榜数据
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'name',
      'roles'
    ])
  },

  created() {
    // 格式化日期为 yyyy-MM-dd
    const formatDate = date => date.format('YYYY-MM-DD')
    // 获取今天和昨天日期
    const today = formatDate(moment())

    this.initLineChartData()
    this.initRankCountData('count', today)
    this.initRankErrorData('error', today)
  },

  methods: {
    // 切换折线图展示
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },

    // 初始化折线图数据
    initLineChartData() {
      dashboardApi.initLineChartData().then((response) => {
        lineChartData['spiderNum'].actualData = response.data.result.spiderNum
        lineChartData['countNum'].actualData = response.data.result.countNum
        lineChartData['errorNum'].actualData = response.data.result.errorNum
        lineChartData['otherNum'].actualData = response.data.result.otherNum
      })
    },

    // 初始化排行榜数据
    initRankCountData(type, date) {
      dashboardApi.initRankData(type, date).then((response) => {
        this.rankListData = response.data.result.rankListData
      })
    },

    // 初始化排行榜数据
    initRankErrorData(type, date) {
      dashboardApi.initRankData(type, date).then((response) => {
        this.rankErrorData = response.data.result.rankErrorData
      })
    },

    // 排行榜切换按钮
    rankButtonClick(type, date) {
      // 格式化日期为 yyyy-MM-dd
      const formatDate = date => date.format('YYYY-MM-DD')

      // 获取今天和昨天日期
      const today = formatDate(moment())
      const yesterday = formatDate(moment().subtract(1, 'days'))

      date = date === 'today' ? today : yesterday
      if (type === 'count') {
        this.initRankCountData(type, date)
      } else {
        this.initRankErrorData(type, date)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style>
  .el-statistic .head {
    font-size: 25px;
  }
  .el-statistic .con .number {
    font-size: 30px;
    padding: 0 4px;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
</style>
